<template>
  <header :id="name" :ref="name">
    <div class="home-container light-typo">

      <div class="container">
        <div class="content-center">

          <div class="col-sm-6">
            <h2>是否有可能让孩子在视力下降前就得到<span class="decoration-h2">保护</span>？</h2>
            <h2>答案是：<b><span class="main-color">可能的！</span></b></h2>
            <br>
            <div class="description ">
              <p>
                作为中国首个在线免费视力筛查平台——
                <br class="hidden-xs hidden-sm">
                中小学生护眼网呼吁家长重视青少年儿童
                <br class="hidden-xs hidden-sm">
                的视力，让孩子养成定期测视力的习惯，
                <br class="hidden-xs hidden-sm">
                并建立视力管理档案，及早发现问题，及
                <br class="hidden-xs hidden-sm">
                早防护。
              </p>
            </div>
            <br>
            <a href="#" target="_blank" class="btn btn-dc btn-small">点击体验</a>
          </div>

        </div>
      </div>

    </div>
  </header>
</template>

<script>

export default {
  props:{
    name:'',
  },
  components: {

  },
  computed: {

  },
  methods: {
    toDiv(){
      window.scrollTo({
        //滚动到元素位置
        top: this.$refs[this.name].getBoundingClientRect().top + window.scrollY,//推荐使用。getBoundingClientRect 相对于当前视口的位置
        behavior: "smooth" // 平滑滚动
      });
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>



</style>

